<template>
  <div class="flex flexColumn">
    <div class="title">
      <span>首页 &gt; 商品管理 &gt; 商品添加</span>
    </div>
    <div class="main flex flexColumn">
      <div class="main-title">商品添加</div>
      <el-form inline label-width="80px" class="flex flexColumn from">
        <el-form-item label="商品名称">
          <el-input v-model="name" clearable=""></el-input>
        </el-form-item>
        <div class="flex">
          <p>商品分类</p>
          <el-select v-model="category" placeholder="请选择">
            <el-option
              v-for="(item, index) in list"
              :key="index"
              :label="item.cateName"
              :value="item.cateName"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex addpro-price">
          <p>商品价格</p>
          <el-input-number
            v-model="price"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </div>
        <div class="flex addpro-img">
          <p>商品图片</p>
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="goodsDesc"></el-input>
        </el-form-item>
        <el-button type="goon" @click="addgoodFn">添加商品</el-button>
      </el-form>
    </div>
  </div>
</template>


<script>
import { categories, addgood } from "@/apis/items.js";
export default {
  data() {
    return {
      list: [],
      name: "",
      category: "",
      price: "",
      imageUrl: "",
      goodsDesc: "",
      imgUrl: "",
    };
  },
  created() {
    categories().then((res) => {
      this.list = res.data.categories;
    });
  },

  methods: {
    addgoodFn() {
      let { name, category, price, imgUrl, goodsDesc } = this;
      addgood({
        name,
        category,
        price,
        imgUrl,
        goodsDesc,
      }).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "优选管理系统提示:" + this.name + "添加成功!",
          });

          this.name = "";
          this.category = "";
          this.price = "";
          this.imgUrl = "";
          this.goodsDesc = "";
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imgUrl = res.imgUrl;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  font-size: 14px;
  color: #606266;
  padding-right: 12px;
  text-align: right;
  width: 70px;
}
[class*=" el-icon-"],
[class^="el-icon-"] {
  line-height: 178px;
}
.el-button--goon {
  color: #fff;
  background-color: #706c61;
  border-color: #706c61;
}
.el-button--light {
  color: #706c61;
  background-color: #e1f4f3;
  border-color: #e1f4f3;
}
</style>